<template>
  <!-- 校内网站 -->
  <div class="xiaoNei-list">
    <div class="xiaoNei-list__info" v-for="(item, index) in xiaoNeiList" :key="index">
      <div class="xiaoNei-list__title font32">{{item.title}}</div>
      <div class="xiaoNei-list__link font32" v-for="(link,i) in item.linkList" :key="i" @click="skipUrl">{{link.name}}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      xiaoNeiList: [
        {
          title: "院部设置",
          linkList: [
            {
              url: "http://www.baidu.com",
              name: "建筑与城市规划学院"
            },
            {
              url: "http://www.baidu.com",
              name: "环境与能源工程学院"
            },
            {
              url: "http://www.baidu.com",
              name: "土木与交通工程学院"
            },
            {
              url: "http://www.baidu.com",
              name: "建筑与城市规划学院"
            },
            {
              url: "http://www.baidu.com",
              name: "环境与能源工程学院"
            },
            {
              url: "http://www.baidu.com",
              name: "土木与交通工程学院"
            },
            {
              url: "http://www.baidu.com",
              name: "环境与能源工程学院"
            },
            {
              url: "http://www.baidu.com",
              name: "土木与交通工程学院"
            },
            {
              url: "http://www.baidu.com",
              name: "建筑与城市规划学院"
            },
            {
              url: "http://www.baidu.com",
              name: "环境与能源工程学院"
            },
            {
              url: "http://www.baidu.com",
              name: "土木与交通工程学院"
            }
          ]
        },
        {
          title: "机关单位",
          linkList: [
            {
              url: "http://www.baidu.com",
              name: "建筑与城市规划学院"
            },
            {
              url: "http://www.baidu.com",
              name: "环境与能源工程学院"
            },
            {
              url: "http://www.baidu.com",
              name: "土木与交通工程学院"
            },
            {
              url: "http://www.baidu.com",
              name: "建筑与城市规划学院"
            },
            {
              url: "http://www.baidu.com",
              name: "环境与能源工程学院"
            },
            {
              url: "http://www.baidu.com",
              name: "土木与交通工程学院"
            },
            {
              url: "http://www.baidu.com",
              name: "环境与能源工程学院"
            },
            {
              url: "http://www.baidu.com",
              name: "土木与交通工程学院"
            },
            {
              url: "http://www.baidu.com",
              name: "建筑与城市规划学院"
            },
            {
              url: "http://www.baidu.com",
              name: "环境与能源工程学院"
            },
            {
              url: "http://www.baidu.com",
              name: "土木与交通工程学院"
            }
          ]
        },
        {
          title: "教辅单位",
          linkList: [
            {
              url: "http://www.baidu.com",
              name: "建筑与城市规划学院"
            },
            {
              url: "http://www.baidu.com",
              name: "环境与能源工程学院"
            },
            {
              url: "http://www.baidu.com",
              name: "土木与交通工程学院"
            },
            {
              url: "http://www.baidu.com",
              name: "建筑与城市规划学院"
            }
          ]
        }
      ]
    };
	},
	methods: {
		skipUrl(link) {
			widown.open(link.url);
		}
	}
};
</script>
<style lang="less" scoped>
/* 校内网站 */
.xiaoNei-list {
	height: 100%;
	background-color: #fff;
	overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 5vh;
  &__info {
		text-align: left;
		border-bottom: 10px solid #eee;
  }
  &__title {
		position: relative;
		&::before {
			content: '';
			position: absolute;
			top: 22px;
			left: 10px;
			width: 4px;
			height: 13px;
			background-color: #6a4781;
		}
	}
	&__title, 
  &__link {
		color: #4b4b4b;
		padding: 17px 0;
		box-sizing: border-box;
		padding-left: 20px;
		white-space: nowrap;
		width: 100%;
		text-overflow: ellipsis;
		overflow: hidden;
		border-bottom: 0.5px solid #eee;
  }
}
</style>


